<template>
  <div class="container">
    <h1>
      剩余答题时间：
      <span>{{m}}分{{s}}秒</span>
    </h1>
    <h3>
      单选题
      <span>
        {{cur}}
        <small>/ {{list.length}}</small>
      </span>
    </h3>
    <div class="swiper-container active-banner">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item,index) in list" :key="index">
          <h4>{{item.question}}</h4>
          <div
            class="item"
            v-for="(it,ind) in item.option"
            :class="{'active':getAnswer(it.topic_oid,item.topic_qid)==1}"
            :key="ind"
            @click="toggleAnswer(it.topic_oid,item.topic_qid)"
          >{{ind==0?'A':''}}{{ind==1?'B':''}}{{ind==2?'C':''}}{{ind==3?'D':''}}.{{it.option_info}}</div>
        </div>
      </div>
    </div>
    <div class="btn" @click="goQuestion">{{cur==list.length?'提交答题':"下一题"}}</div>
    <div class="mask" v-if="maskF">
      <div class="content">
        <p>确定退出答题？ 退出后作答历史将不会保存</p>
        <div class="btn-group">
          <div class="ok" @click="goBack">确定</div>
          <div class="cancel" @click="maskF=false">返回</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      rule: "",
      text_tip: "",
      list: [],
      cur: 1,
      id: "",
      answer: [],
      swiper: "",
      maskF: false,
      s: "",
      m: "",
      t_date: "",
      answer_point: ""
    };
  },
  mounted() {
    this.id = this.$route.query.id;
    this.answer_point = this.$route.query.answer_point;
    this.t_date = this.$route.query.t_date;
    var str = (this.t_date + " " + this.answer_point).replace(
      new RegExp("-", "gm"),
      "/"
    );
    console.log(str);
    this.getDate(str);
    this.get_question(this.id);
    var that = this;
    var that = this;
    (function() {
      that.pushHistory();
      window.addEventListener(
        "popstate",
        function(e) {
          //alert("触发了页面返回事件")   可以放实际业务代码
          that.maskF = true;
        },
        false
      );
    })();
  },
  methods: {
    getAnswered(id) {
      var that = this;
      var num = 0;

      for (var i = 0; i < that.answer.length; i++) {
        if (that.answer[i].indexOf(that.list[that.cur - 1].topic_qid) >= 0) {
          num = num + 1;
        }
      }
      if (num == 0) {
        return 1;
      } else {
        return 0;
      }
    },
    pushHistory() {
      var state = {
        title: "",
        url: "#"
      };
      window.history.pushState(state, state.title, state.url);
    },
    goBack() {
      this.$router.go(-1);
    },
    getAnswer(oid, id) {
      var str = id + "_" + oid;
      if (this.answer.indexOf(str) > -1) {
        return 1;
      } else {
        return 0;
      }
    },
    toggleAnswer(oid, id) {
      var arr = [];
      for (var i = 0; i < this.answer.length; i++) {
        if (this.answer[i].indexOf(id) == -1) {
          arr.push(this.answer[i]);
        }
      }
      arr.push(id + "_" + oid);
      this.answer = arr;
    },
    getDate(str) {
      var that = this;
      this.$api.getRules().then(res => {
        if (res.status == 1) {
          this.rules = res.data;
          var nowDate = this.rules.now_time.replace(new RegExp("-", "gm"), "/");
          var add_time = new Date(str).getTime();
          var end_time = new Date(nowDate).getTime();

          var minutes = parseInt(
            ((end_time - add_time) % (1000 * 60 * 60)) / (1000 * 60)
          );
          var hours = parseInt(
            ((end_time - add_time) % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
          );
          var seconds = parseInt(((end_time - add_time) % (1000 * 60)) / 1000);
          console.log(that.rules.answer_time, minutes);
          that.m = that.rules.answer_time - minutes - hours * 60;
          that.s = 60 - seconds;
          that.add();
        }
      });
    },
    add() {
      var _this = this;
      var time = window.setInterval(function() {
        if (_this.s === 0 && _this.m !== 0) {
          _this.s = 59;
          _this.m -= 1;
        } else if (_this.m === 0 && _this.s === 0) {
          _this.s = 0;
          _this.getLists();
          clearInterval(time);
        } else {
          _this.s -= 1;
        }
      }, 1000);
    },
    get_question(id) {
      var that = this;
      this.$api.get_question(id).then(res => {
        if (res.status == 1) {
          this.list = res.data;
          if (this.list.length > 1) {
            that.swiper = new Swiper(".active-banner", {
              autoplay: false,
              spaceBetween: 20,
              observeParents: true,
              observer: true,
              effect: "slide",
              noSwiping: true,
              autoplayDisableOnInteraction: false,
              onSlideChangeStart: function(swipers) {
                if (swipers.realIndex < that.cur - 1) {
                  that.cur = swipers.realIndex + 1;
                  return false;
                }
                var num = 0;

                for (var i = 0; i < that.answer.length; i++) {
                  if (
                    that.answer[i].indexOf(that.list[that.cur - 1].topic_qid) >=
                    0
                  ) {
                    num = num + 1;
                  }
                }
                if (num == 0) {
                  Toast("请完成答题");
                  swipers.slideTo(that.cur - 1, 500, true);
                  return;
                }
                that.cur = swipers.realIndex + 1;
              },
              paginationClickable: false
              // 如果需要分页器
            });
          }
        } else {
          this.$router.go(-1);
        }
      });
    },
    goQuestion() {
      var that = this;
      if (this.cur != this.list.length) {
        var num = 0;
        for (var i = 0; i < that.answer.length; i++) {
          if (that.answer[i].indexOf(that.list[that.cur - 1].topic_qid) >= 0) {
            num = num + 1;
          }
        }
        if (num == 0) {
          Toast("请完成答题");
          return false;
        } else {
          if (this.swiper) {
            this.swiper.slideTo(this.cur, 500, true);
          }
        }
      } else {
        this.$api.saveQusetion(this.id, this.answer).then(res => {
          if (res.status == 1) {
            localStorage.end = JSON.stringify(res.data);
            this.$router.push({ path: "/questionEnd", query: { id: this.id } });
          } else {
            Toast(res.msg);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1200;
  .content {
    width: 280px;
    height: 146px;
    background: rgba(255, 255, 255, 1);
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    p {
      padding: 30px 30px 15px;
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      border-bottom: 1px solid #b5b5b5;
    }
    .btn-group {
      width: 96%;
      display: flex;
      padding: 16px;
      margin: 0 auto;
      .ok {
        flex: 1;
        color: #757575;
        text-align: center;
        font-size: 18px;
      }
      .cancel {
        flex: 1;
        color: #9d0e0d;
        text-align: center;
        font-size: 18px;
      }
    }
  }
}
.container {
  // width: 100%;
  min-height: 100vh;
  background: url(../.././img/yue/2.png) no-repeat #c0292c;
  background-size: cover;
  padding: 30px 20px;
  h1 {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    padding: 10px 0px;
    span {
      color: #ffdf7a;
    }
  }
  h3 {
    font-size: 24px;
    font-weight: 400;
    color: #ffdf7a;
    overflow: hidden;
    span {
      float: right;
      color: #fff;
      small {
        font-size: 16px;
      }
    }
  }
  .active-banner {
    margin-top: 30px;
    .swiper-slide {
      width: 338px;
      padding: 30px 20px;
      background: rgba(255, 255, 255, 1);
      border: 3px solid rgba(255, 253, 253, 1);
      border-radius: 10px;
    }
  }
  h4 {
    font-size: 17px;
    line-height: 24px;
    color: #000;
    font-weight: 400;
  }
  .item {
    font-size: 16px;
    width: 296px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
    border-radius: 23px;
    line-height: 48px;
    text-align: center;
    margin: 30px auto 0;
    &.active {
      background: #f0a943;
      position: relative;
      box-shadow: 0px 4px 12px 1px rgba(84, 105, 71, 0.3);
      color: #fff;
      // &:after {
      //   content: "";
      //   width: 16px;
      //   height: 16px;
      //   background: url(../.././img/yue/v.png) no-repeat;
      //   background-size: contain;
      //   position: absolute;
      //   top: 50%;
      //   right: 20px;
      //   transform: translateY(-50%);
      // }
    }
    .error {
      background: rgba(226, 56, 56, 1);
      position: relative;
      box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
      color: #fff;
      &:after {
        content: "";
        width: 16px;
        height: 16px;
        background: url(../.././img/yue/x.png) no-repeat;
        background-size: contain;
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
      }
    }
  }
  .des {
    display: block;
    line-height: 18px;
    white-space: pre-wrap;
    font-size: 15px;
    color: #ffdf7a;
    margin: 20px 0 0;
    font-weight: bold;
  }
  .btn {
    width: 162px;
    height: 48px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 4px 12px 1px rgba(162, 162, 162, 0.3);
    border-radius: 24px;
    color: #9d100f;
    text-align: center;
    line-height: 48px;
    font-size: 16px;
    margin: 20px auto;
  }
}
</style>